<template>
  <el-form ref="formRef" :model="formData" :rules="rules" size="default" label-width="80px" style="width: 100%;">
    <el-row :gutter="15">
      <el-col :span="8">
        <el-form-item label="流程名称" prop="processName">
          <el-input v-model="formData.processName" placeholder="请输入流程名称" :maxlength="30" show-word-limit
          clearable :style="{width: '100%'}"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="备注" prop="remark">
          <el-input v-model="formData.remark" type="text" placeholder="请输入备注" :maxlength="100" 
          show-word-limit clearable :style="{width: '100%'}"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'

const props = defineProps(['modelValue'])

const emit = defineEmits(['user-click', 'update:modelValue'])

// 暴露重置表单的方法
defineExpose({ resetForm })

// 表单
const formRef = ref()
// 表单数据
const formData = ref({
  processName: '',
  remark: ''
})
// 规则
const rules = ref({
  processName: [{
    required: true,
    message: '请输入流程名称',
    trigger: 'blur'
  }],
  remark: [{
    required: true,
    message: '请输入备注',
    trigger: 'blur'
  }]
})

/** 表单提交 */
function submitForm() {
  formRef.value.validate((valid) => {
    if (!valid) return
    // 触发事件
    emit('user-click')
    // 
  })
}

/** 表单重置 */
function resetForm() {
  formRef.value.resetFields()
  emit('update:modelValue', formData.value)
}

// 监听formData变化
watch(formData, (nv, ov) => {
  console.log('formData发生变化')
  emit('update:modelValue', nv)
}, { deep: true })

// 页面挂载
watch(() => props.modelValue, (nv, ov) => {
  console.log('props.modelValue发生变化')
  formData.value = nv
}, { deep: true })

</script>

<style>

</style>